<template>
	<view class="content">
		<topBox :buttonShow="true"></topBox>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="item-title">
					<text class="name">
						{{ item.recruit_type_work }}
					</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con" @click="goPreviewDetail(item)">
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{ item.recruit_address }}</view>
					</view>
					<view class="con-row">
						<text class="txt">工作内容：</text>
						<view class="txt-con ellipsis3">{{ item.recruit_requirement || ''}}</view>
					</view>
					<view class="con-row">
						<text class="txt"
							style="display: flex;justify-content: center;align-items: center;">招工奖励及要求：</text>
						<view class="txt-con">
							{{ item.recruit_content || ''}}
						</view>
						<!-- 					<view class="text-con" v-else>
							<u-button size="mini" type="warning" style="background-color: #FF0000;">密</u-button>
						</view> -->
					</view>
					<view class="con-row">
						<text class="txt">浏览数：</text>
						<view class="txt-con ellipsis3">{{ item.views || ''}}</view>
					</view>
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">

						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
					</view>
				</view>
				<view class="bottom flex">
					<u-avatar class="headImg" :src="item.avatarUrl" mode="square" style="margin-right:10upx"></u-avatar>
					<view class="bottom" v-if="(item.id >0 && userId > 0)">
						本项目专用联系电话
						<view class="mobile" @click="phone(item.recruit_link_tel)">
							{{item.recruit_link_tel}}
						</view>
						<view class="" v-for="mItem in item.mobile" :key="mItem.mobile">
							<text class="mobile" @click="phone(mItem.mobile)">{{mItem.mobile}}</text>
						</view>
					</view>
					<!-- 					<view v-else-if="(userId > 0 && (roleType != 1 && roleType != 2))">
						<u-button style="padding: 1rpx!important;font-size: small;" type="warning">无法查看联系</u-button>
					</view> -->
					<view v-else-if="(!userId)">
						<u-button style="padding: 1rpx!important;font-size: small;" @click="toLogin()" type="warning">
							登录查看联系</u-button>
					</view>

					<view class=""
						style=" width: 260rpx;
							justify-content: center;height: 80rpx;line-height: 40rpx;border-radius: 10rpx;text-align: center;
					display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: green;color: #FFFFFF;margin-right: 10rpx;font-size: 30rpx;"
						:custom-style="customStyle" v-if="(item.id >0 && userId > 0)"
						@click="poster(item.recruit_id, item)">
						<text class="flex flex-direction" style="font-weight: 600;">生成招聘海报</text>
						<text class="flex flex-direction" style="font-size: 25rpx;">(已代理该项目)</text>
					</view>
					<!-- 	<u-button type="success" v-if="(item.id >0 && userId > 0)" @click="poster(item.recruit_id, item)"
						style="width: 260rpx;">生成招聘海报</u-button> -->
					<!-- 					<u-button type="success" v-if="(item.id >0 && userId > 0)"
							@click="toClaim(item.recruit_id, item.id)" style="width: 260rpx;">已&nbsp;认&nbsp;领</u-button> -->
					<view class=""
						style=" width: 250rpx;
		justify-content: center;height: 80rpx;line-height: 40rpx;border-radius: 10rpx;text-align: center;
display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #FF0000;color: #FFFFFF;margin-right: 10rpx;font-size: 30rpx;"
						v-else type="primary" @click="toClaim(item.recruit_id)" :custom-style="customStyle">
						<text class="flex flex-direction" style="font-weight: 600;">帮他招工赚钱</text>
						<text class="flex flex-direction" style="color: #333333;font-size: 25rpx;">(获取联系方式)</text>
					</view>
				</view>
			</view>

			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20"
				:margin-bottom="20" />
		</view>
		<tabBar :selected="0"></tabBar>
		<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
			<image :src="h5SaveImg" style="margin: 20px;height: 80%;" mode="widthFix"></image>
			<button class="download" @click="onSaveImg">分享到发微信群和朋友圈</button>
		</view>
		<painter @imgOK="onImgOk" @imgErr="onImgErr" widthPixels="750" :palette="templateJson" v-if="showPost" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import topBox from '../../components/top-box/top-box.vue';
	import tabBar from '../../components/tabBar/tabBar.vue';
	import painter from '../../components/tuitui-painter/painter.vue';
	import {
		newFileImgeUrl
	} from '@/common/config.js'
	let settingWritePhotosAlbum = false;
	export default {
		components: {
			topBox,
			tabBar,
			painter
		},
		customStyle: {
			'font-size': 'small',
			'background-color': 'rgb(255, 153, 0)'
		},
		data() {
			return {
				videoCurrTime: 0,
				videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
				customStyle: {
					background: '#E04110',
					height: '100%',
					border: 'none',
					color: '#fff'
				},
				loadStatus: 'nomore',
				params: {
					startRow: 1,
					rowSize: 6,
					latitudes: 32,
					longitudes: 43,
					status: 'FB',
					token: uni.getStorageSync('token')
				},
				list: [],
				imageCode: '',
				show: true,
				userId: '',
				role: uni.getStorageSync('role'),
				roleType: uni.getStorageSync('roleType'),
				userInfo: uni.getStorageSync('userInfo'),
				h5SaveImg: '',
				showPost: '',
				templateJson: {},
				wxUserInfo: uni.getStorageSync('wxUserInfo'),
			};
		},
		computed: {
			...mapState({
				// userId: state => state.userId
			})
		},
		onShow() {
			if (this.userId && this.roleType == 0) {
				this.postGetAdminInfo().then(res => {

					// uni.navigateBack()

				});
			}
			this.userId= uni.getStorageSync('userId')
			this.list = []
			this.params.startRow = 1
			uni.hideTabBar()
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.params.latitudes = res.latitude;
					this.params.longitudes = res.longitude;
					this.postGetActivityList('up');
				}
			});
		},
		onLoad(e) {
			this.userId = uni.getStorageSync('userId');
			let token = uni.getStorageSync('token');
			if (token) {
				// this.generateCode();
			}
			if (e.scene) {
				let scene = decodeURIComponent(e.scene);
				uni.setStorageSync('recId', e.scene);
			}


		},
		onPullDownRefresh() {
			this.dropDown();
		},
		onReachBottom() {
			this.pullUp();
		},
		onShareAppMessage(res) {
			return {
				title: '嗨！快来加入我们平台吧',
				path: 'pages/index/full-screen', // ?后面的参数会在转发页面打开时传入onLoad方法
				imageUrl: '../../static/image/share.jpg', // 支持本地或远程图片，默认是小程序icon
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				//#ifdef MP-TOUTIAO
				templateId: '3i8j136lmaio1n9iek',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
				//#endif
			}

		},
		methods: {
			postLoginCheck() {
				let params = {
					...this.params
				};
				this.$u.api
					.postLoginCheck(params)
					.then(res => {
						if (res.status == true) {
							console.log(res, '[登录页面-登录]');
							uni.setStorageSync('token', res.data);
							// 获取用户信息
							this.postGetAdminInfo().then(res => {

								// uni.navigateBack()

							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取用户信息
			postGetAdminInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api
						.postGetAdminInfo()
						.then(res => {
							console.log(res)
							if (res.status == true) {
								uni.setStorageSync('userPhone', res.data.phone);
								// this.$store.commit('commitUserId', res.data.id);
								uni.setStorageSync('userId', res.data.id);
								uni.setStorageSync('userInfo', res.data);
								this.$store.commit('commitUserInfo', res.data);
								switch (res.data.type) {
									case 0:
										uni.setStorageSync('role', 'any');
										uni.setStorageSync('roleType', 0);
										break;
									case 1:
										uni.setStorageSync('role', 'small');
										uni.setStorageSync('roleType', 1);
										break;
									case 2:
										uni.setStorageSync('role', 'small');
										uni.setStorageSync('roleType', 2);
									case 3:
										uni.setStorageSync('role', 'big');
										uni.setStorageSync('roleType', 3);
								}
							}
							// if (res && res.data.applyType) {
							// 	uni.reLaunch({
							// 		url: 'apply'
							// 	})
							// } else {
							// 	uni.reLaunch({
							// 		url: './index/home'
							// 	});
							// }

							resolve();
						})
						.catch(err => {
							console.log(err);
							reject();
						});
				});
			},
			toLogin() {
				console.log(555)
				uni.navigateTo({
					url: '../login?type=1'
				})
			},
			toDesc(row) {
				if (!row.recruit_id) {
					return uni.showToast({
						title: '数据异常，请稍后再试',
						icon: 'none'
					})
				}
				console.log(row)
				uni.navigateTo({
					url: '../preview/previewDetail?recruit_id=' + row.recruit_id + '&id=' + row.id
				})
				console.log(row.recruit_id)
			},
			toClaim(recruit_id, id) {
				console.log(recruit_id)
				if (!recruit_id) {
					return uni.showToast({
						title: '数据异常，请稍后再试',
						icon: 'none'
					})
				}
				if (this.userId == '') {
					return uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000,
						success() {
							uni.navigateTo({
								url: '../login?type=1'
							})
						}
					})
				}
				if (this.roleType == 2 || this.roleType == 1 || this.roleType == 0) {
					uni.navigateTo({
						url: '../talent/publishClaim?recruit_id=' + recruit_id + '&id=' + (id ? id : '')
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '当前无法招工'
					})
				}

				console.log(recruit_id)
			},
			makeCall(item) {
				uni.makePhoneCall({
					phoneNumber: item.recruit_link_tel
				});
			},
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 下拉刷新
			dropDown() {
				console.log('down');
				// 修改当前view的数据
				this.params.startRow = 1;
				// 加载下拉刷新的数据
				this.postGetActivityList('down');
			},
			// 上拉加载
			pullUp() {
				console.log('up');
				// 增加页数
				this.params.startRow++;
				// 请求获取数据
				this.postGetActivityList('up');
			},
			// 活动管理-查询活动列表
			postGetActivityList(type) {
				this.$u.api
					.postPageQueryByWork(this.params)
					.then(res => {
						uni.stopPullDownRefresh();
						if (res.status == true) {
							let data = res.data;
							// 如果是上拉加载
							if (type == 'up') {
								// 判断分页
								if (res.data.length <= this.params.rowSize) {
									for (var i = 0; i < res.data.length; i++) {
										this.list.push(res.data[i]);
									}
									this.loadStatus = 'loading';

									// 如果数量小于页容量，显示没有更多数据
									if (res.data.length < this.params.rowSize) {
										this.loadStatus = 'nomore';
									}
								} else {
									this.params.rowSize = res.data.total;
									this.loadStatus = 'nomore';
								}
							}

							// 如果是下拉刷新
							if (type == 'down') {
								// 将数据
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}

								this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
							}
						}
					})
					.catch(err => {
						uni.stopPullDownRefresh();
					});
			},
			generateCode() {
				let params = {
					busiType: 1,
					busiId: uni.getStorageSync('userId') + ',GG',
					url: 'pages/index/index'
				};
				this.$u.api.postGenerateQrCode(params).then(res => {
					if (res.status == true) {
						this.imageCode = 'data:image/jpeg;base64' + res.data;
					}
				});
			},
			onImgOk(e) {
				console.log(e)
				// this.tempImg = e.path
				this.h5SaveImg = e.path
				uni.hideLoading()
				this.showPost = false
			},
			onImgErr(e) {
				console.log(e + 'bbbbbbbbbbbbbbbbbbbb')
			},
			poster(recruit_id, item) {
				console.log(item)
				console.log(this.wxUserInfo+"  wxUserInfo")
				var that = this

				that.$u.api.getIntermediaryRecruitInfo({
					id: item.id,
					// userId: uni.getStorageSync('userId')
				}).then(function(res1) {
					console.log(res1.data)
					that.$u.api.userGetCord({
						recruit_id: recruit_id,
						id: item.id,
						type: '-1'
					}).then(res => {
						uni.showLoading({
							title: '海报生成中',
							mask: true
						});
						if (res.status == true) {
							console.log(item)

							that.showPost = true
							if (item.recruit_pic != null) {
								item.picURL = item.recruit_pic[0].images_url

							} else {
								item.picURL = 'https://lwfd.56ge.com.cn/static/default.jpg'
							}
							if (item.avatarUrl) {
								item.avatarUrl1 = item.avatarUrl

							} else {
								item.avatarUrl1 = '../../static/image/avatal.png'
							}

							that.templateJson = {
								"width": "654px",
								"height": "1000px",
								"background": "#fff",
								"views": [{
										"type": "rect",
										"css": {
											"background": "#cfcdcd",
											"width": "650px",
											"height": "350px",
											"top": "645px",
											"left": "2px",
											"rotate": "0",
											"borderRadius": "0px",
											"shadow": "",
											"color": "#cfcdcd"
										}
									}, {
										"type": "image",
										"url": newFileImgeUrl + res.data,
										"css": {
											"color": "#000000",
											"background": "#ffffff",
											"width": "250px",
											"height": "250px",
											"top": "379px",
											"left": "1px",
											"rotate": "0",
											"borderRadius": "10px",
											"mode": 'auto'
										}
									},
									{
										"type": "image",
										"url": item.picURL,
										"css": {
											"width": "654px",
											"height": "350px",
											"top": "0px",
											"left": "0px",
											"rotate": "0",
											"borderRadius": "10px",
											"borderWidth": "",
											"borderColor": "#000000",
											"shadow": "10 10 10 #888888",
											"mode": "auto"
										}
									}, {
										"type": "rect",
										"css": {
											"background": "#CC0000",
											"width": "380px",
											"height": "130px",
											"top": "440px",
											"left": "260px",
											"rotate": "0",
											"borderRadius": "10px",
											"shadow": "",
											"color": "#CC0000"
										}
									}, {
										"type": "text",
										"text": "——真诚招聘  拒绝套路——",
										"css": {
											"width": "400px",
											"height": "300px",
											"top": "380px",
											"left": "260px",
											"fontSize": "30px",
											"fontWeight": "bold",
										}
									}, {
										"type": "text",
										"text": res1.data.content,
										"css": {
											"width": "652px",
											"height": "70px",
											"top": "645px",
											"left": "10px",
											"padding": '10px',
											"fontSize": "55px",
											"fontWeight": "bold",
											"color": 'red',
											"maxLines": "2",
											"textDecoration": "none",
											"textAlign": "center",
										}
									}, {
										"type": "text",
										"text": "--------------------------------------------------",
										"css": {
											"width": "650px",
											"height": "10px",
											"top": "750px",
											"left": "2px",
											"fontSize": "30px",
											"fontWeight": "normal",
										}
									}, {
										"type": "text",
										"text": item.recruit_requirement,
										"css": {
											"width": "650px",
											"height": "300px",
											"top": "780px",
											"left": "10px",
											"fontSize": "20px",
											"fontWeight": "normal",
											"maxLines": "4",
											"lineHeight": "50px",
											"textStyle": "fill",
											"textDecoration": "none",
											"fontFamily": "",
											"textAlign": "left"
										}
									}, {
										"type": "image",
										"url": that.wxUserInfo.avatarUrl,
										"css": {
											"width": "100px",
											"height": "100px",
											"top": "450px",
											"left": "265px",
											"rotate": "0",
											"borderRadius": "100px",
											"mode": "scaleToFill"
										}
									}, {
										"type": "text",
										"text": that.wxUserInfo.nickName,
										"css": {
											"width": "250px",
											"height": "320px",
											"top": "490px",
											"left": "380px",
											"color": 'white',
											"fontSize": "30px",
											"fontWeight": "normal",
											"maxLines": "1",
											"textStyle": "fill",
											"textDecoration": "none",
											"fontFamily": "",
											"textAlign": "center"
										}
									},
									{
										"type": "text",
										"text": "联系电话：" + res1.data.link_tel,
										"css": {
											"width": "350px",
											"height": "320px",
											"top": "530px",
											"left": "380px",
											"fontSize": "20px",
											"fontWeight": "normal",
											"textStyle": "fill",
											"textDecoration": "none",
											"fontFamily": "",
											"textAlign": "center"
										}
									}, {
										"type": "text",
										"text": "项目地址：",
										"css": {
											"width": "100px",
											"height": "300px",
											"top": "600px",
											"left": "260px",
											"fontSize": "20px",
											"fontWeight": "bold",
											"textStyle": "fill",
											"textDecoration": "none",
											"fontFamily": "",
											"textAlign": "center"
										}
									}, {
										"type": "text",
										"text": res1.data.recruit_area,
										"css": {
											"width": "255px",
											"height": "300px",
											"top": "600px",
											"left": "360px",
											"fontSize": "20px",
											"fontWeight": "normal",
											"textStyle": "fill",
											"textDecoration": "none",
											"fontFamily": "",
											"textAlign": "center"
										}
									},
								]
							}
						}
					})
				})

			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				imgUrl = this.h5SaveImg
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '海报下载中'
				});
				if (settingWritePhotosAlbum) {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								uni.saveImageToPhotosAlbum({
									filePath: imgUrl,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功'
										});
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: '请先在设置页面打开“保存相册”使用权限',
									confirmText: '去设置',
									cancelText: '算了',
									success: data => {
										if (data.confirm) {
											uni.hideLoading();
											uni.openSetting();
										}
									}
								});
							}
						}
					});
				} else {
					settingWritePhotosAlbum = true;
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						}
					});
				}
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '海报下载中'
				});
				uni.saveImageToPhotosAlbum({
					filePath: imgUrl,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						});
					}
				});
				// #endif
			},
			goPreviewDetail(row) {
				uni.navigateTo({
					url: '../preview/previewDetail?recruit_id=' + row.recruit_id + '&id=' + row.id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		position: relative;
		// padding-top: 240upx;
		padding-bottom: 30rpx;

		.publish_btn {
			margin: 20upx;
		}



		.list-wrap {
			padding: 0 20upx 20upx;
			position: relative;
			z-index: 10;

			.list-item {
				padding: 30upx 20upx 10upx;
				background: #fff;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
				border-radius: 6px;
				margin-bottom: 20upx;

				.item-title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24upx;

					.name {
						font-size: 30upx;
						font-weight: bold;
						color: rgba(101, 101, 101, 1);
					}

					.price {
						font-size: 26upx;
						font-weight: bold;
						color: rgba(236, 71, 21, 1);
					}
				}

				.item-con {
					border-bottom: 1px solid rgba(221, 221, 221, 1);
					margin-bottom: 10upx;
					padding-bottom: 10upx;

					.con-row {
						display: flex;
						font-size: 24upx;
						font-weight: 500;
						color: rgba(101, 101, 101, 1);
						line-height: 34upx;
						margin-bottom: 18upx;

						.txt {
							flex: none;
							color: #999;
							margin-right: 10upx;
						}

						.txt-info {
							flex: 1;
						}
					}

					.flex-row {
						display: flex;
						justify-content: space-between;

						.row {
							font-size: 24upx;
							font-weight: 500;
							color: rgba(153, 153, 153, 1);
							margin-bottom: 18upx;
						}
					}

					.img-box {
						flex: 1;
						margin-right: 20upx;

						.img {
							width: 90upx;
							height: 90upx;
							border-radius: 6px;
							margin-right: 10upx;
						}
					}
				}

				.light {
					color: #333;
					margin: 0 6upx;
				}
			}
		}
	}

	.textarea {
		border: 1px solid #C0C0C0;
		margin: 10upx 0;
		padding: 10upx;
	}

	.ellipsis3 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: #E04110;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 15%;
			left: 50%;
			transform: translateX(-50%);


		}
	}

	.mobile {
		text-decoration: underline;
		color: blue;
	}
</style>
